<template>
  <div class="cu-modal bottom-modal" :class="{ show: visible }">
    <div class="mask" @click="close"></div>
    <div class="wrapper cu-dialog">
      <div>
        <div class="row column" style="position: relative; padding: 0.5rem 0">
          <van-image :src="resource.goods_title" class="title" />
          <van-image :src="resource.icon_x" class="x" @click="close" />
        </div>
        <div style="height: 7rem; overflow-y: scroll">
          <div class="column" style="padding: 0 0.2rem">
            <div
              v-if="item"
              class="fw600 fz30"
              style="color: rgba(255, 255, 255, 0.8); padding-bottom: 0.1rem"
            >
              {{ item.name }}
            </div>
            <van-image
              v-for="(item, index) in picArray"
              :key="index"
              class="image"
              :src="item"
              style="margin: 0.1rem 0"
              mode="aspectFit"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import resource from "@/utils/resource";
export default {
  data() {
    return {
      resource,
      visible: false,
      picArray: [],
      item: null,
    };
  },
  methods: {
    show(item) {
      this.visible = true;
      this.item = item;
      this.picArray = item.pic.split(",");
    },
    close() {
      this.visible = false;
      this.picArray = [];
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
.mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.wrapper {
  background: #171b1e;
  border-radius: 0.15rem 0.15rem 0.02rem 0.02rem;
  .title {
    width: 1.72rem;
    height: 0.28rem;
  }
  .x {
    position: absolute;
    right: 0.28rem;
    top: 50%;
    margin-top: -0.16rem;
    width: 0.32rem;
    height: 0.32rem;
  }
}
</style>